<template>
  <div class="wrap">
    <div class="content" v-loading="loading">
      <div class="header-tips">
        以下数据为系统默认数据，系统新创建的用户和"默认用户"均适用以下单价
        <br>
        单独修改过单价的用户不受以下默认单价控制，您可以通过用户列表中的「默认」按钮，将对应用户恢复为"默认用户"
      </div>

      <div class="form">
        <el-form
          :form="currentForm"
          label-width="150px"
        >
          <el-form-item label="默认贴单单价" prop="account">
            <el-input-number
              v-model="currentForm.stickerPrice"
              autocomplete="off"
              :precision="2"
              :min="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="默认仓储单价" prop="">
            <div>
              <div class="mgb10">
                100公分以下：
                <el-input-number
                  v-model="currentForm.storagePrice1"
                  autocomplete="off"
                  :precision="2"
                  :min="0"
                ></el-input-number>
              </div>

              <div
                class="mgb10"
              >
                100-150公分：
                <el-input-number
                  v-model="currentForm.storagePrice2"
                  autocomplete="off"
                  :precision="2"
                  :min="0"
                ></el-input-number>
              </div>

              <div>
                150公分以上：
                <el-input-number
                  v-model="currentForm.storagePrice3"
                  autocomplete="off"
                  :precision="2"
                  :min="0"
                ></el-input-number>
              </div>
            </div>
            <div class="font-red">默认单价修改后，仅对修改后新增的订单和修改当天及以后的仓储时长生效</div>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" :disabled="disableButton" @click="saveData" :loading="saveLoading">确认</el-button>
          </el-form-item>
        </el-form>

      </div>

    </div>
  </div>
</template>

<script>
import {deepCopy} from "@/utils";
import {getSetting, saveSetting} from "@/api/setting";

export default {
  name: "index",
  data(){
    return {
      currentForm: {
        stickerPrice: 0,
        storagePrice1: 0,
        storagePrice2: 0,
        storagePrice3: 0,
      },
      copyForm: {

      },
      loading: false,
      saveLoading: false,
    }
  },
  created() {
    this.getData();
  },
  computed:{
    disableButton(){
      return JSON.stringify(this.copyForm) === JSON.stringify(this.currentForm)
    }
  },
  methods: {
    getData(){
      this.loading = true;
      getSetting()
        .then(res=>{
          this.currentForm.stickerPrice = res.data.stickerPrice
          this.currentForm.storagePrice1 = res.data.storagePrice1
          this.currentForm.storagePrice2 = res.data.storagePrice2
          this.currentForm.storagePrice3 = res.data.storagePrice3
          this.copyForm = deepCopy(this.currentForm)
          this.loading = false;
        })
    },
    saveData(){
      this.saveLoading = true;
      saveSetting(this.currentForm)
        .then(res=>{
          this.saveLoading = false;
          this.$successMessage(res.message)
          this.getData()
        })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 10px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
    .header-tips{
      font-size: 14px;
    }
    .form{
      margin-top: 30px;
    }
  }
}
</style>
